<script setup lang="ts">
import { getHetongchakanUrl, viewContractFile } from '@fl/api/contract/yangbenhetong/house'
import { getBase, getCustomLogInfo, listByPaymentLog } from '@fl/api/order/base'
import { useStoreDict } from '@fl/store/modules/goodHouseDict'

import DictTag from './components/DictTag/index.vue'
import editHomebuyer from './editHomebuyer.vue'
import peopleDialog from './people.vue'

const props = defineProps({
    handleClose: {
        required: true,
        type: Function,
    },
    orderDetailsForm: {
        required: true,
        type: Object,
    },
})

const dictStore = useStoreDict()
dictStore.init(['order_ddzt', 'order_zffs', 'order_ddlx', 'order_shzt', 'zjlx', 'order_fwdlx', 'order_fwdzt'])
const { getDicts } = storeToRefs(dictStore)

const dialogVisible = ref<boolean>(false)
const id = ref<string>('')
const htmlUrl_print = ref<string>('')
const company = ref<any>({})
const house = ref<any>({})
const houseCustom = ref<any[]>([])
const orders = ref<any>({})
const projectBase = ref<any>({})
const operateInfo = ref<any[]>([])
const peopleDialogVisible = ref<boolean>(false)
const houseCustomId = ref<string>('')
const editVisible = ref<boolean>(false)
const houseCustom1 = ref<any[]>([])
const customLogStateFlag = ref<boolean>(false)
const data = reactive<any>({
    orderDetailsForm: {},
})
const { orderDetailsForm } = toRefs(data)
// 金额千位符
const toLocale = computed(() => (x = '') => {
    return x != null ? `${x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}元` : '/'
})
// 订单状态
const ddztStr = computed(() => {
    if (orders.value?.status) {
        const obj = getDicts.value.order_ddzt.find(d => d.value === orders.value.status)
        return obj !== undefined ? obj.label : ''
    }
    else {
        return ''
    }
})
// 支付方式
const zffsStr = computed(() => {
    if (orders.value?.paymentMethod) {
        const obj = getDicts.value.order_zffs.find(d => d.value === orders.value.paymentMethod)
        return obj !== undefined ? obj.label : ''
    }
    else {
        return ''
    }
})
// 订单类型
const ddlxStr = computed(() => {
    if (orders.value?.orderType) {
        const obj = getDicts.value.order_ddlx.find(d => d.value === orders.value.orderType)
        return obj !== undefined ? obj.label : ''
    }
    else {
        return ''
    }
})

// 显示用户详情
function openPeopleDetail() {
    houseCustomId.value = orders.value.houseCustomId
    peopleDialogVisible.value = true
}

// 关闭peopleDialog
function peopleDialogHandleClose() {
    peopleDialogVisible.value = false
}

// 获取订单详情
function getDetails() {
    getBase(id.value).then((response) => {
        company.value = response.data.company
        house.value = response.data.house
        houseCustom.value = response.data.houseCustom
        orders.value = response.data.orders
        projectBase.value = response.data.projectBase
        operateInfo.value = response.data.records
        if (orders.value.customLogState !== null) {
            customLogStateFlag.value = true
        }
    })
}
// 查看合同
async function handleView() {
    getviewContractFile(house.value.contractId, 1, 1)
}

// 查询我们的pdf
async function getviewContractFile(htbh, type, childType) {
    const loading = ElLoading.service({
        background: 'rgba(0, 0, 0, 0.7)',
        lock: true,
        text: 'Loading',
    })
    try {
        const res = await viewContractFile(htbh, type, childType)
        loading.close()
        if (res.code === 200) {
            dialogVisible.value = true
            htmlUrl_print.value = res.data[0].url
        }
    }
    catch (e) {
        loading.close()
    }
}

// 弹出编辑购房人弹框
function openEditHomebuyer() {
    id.value = orderDetailsForm.value.id
    editVisible.value = true
}

// 关闭编辑购房人弹框
function editHomebuyerHandleClose() {
    editVisible.value = false
    houseCustom1.value = []
}

onMounted(() => {
    orderDetailsForm.value = props.orderDetailsForm
    id.value = props.orderDetailsForm.id
    getDetails()
})
</script>

<template>
    <div class="app-container">
        <el-card class="box-card"
                 shadow="never"
                 style="margin: 0 auto;width: 100%;padding: 0px;margin-top: 0px;size: 16px;"
        >
            <template #header>
                <div class="card-header">
                    <div style="height: 20px;color: #f04844;line-height: 20px;display: flex;align-items: center;">
                        <el-tooltip class="box-item"
                                    effect="dark"
                                    content="提示信息"
                                    placement="bottom-start"
                        >
                            <el-icon>
                                <Warning />
                            </el-icon>
                        </el-tooltip>
                        &nbsp;当前订单状态：&nbsp;{{ ddztStr }}
						&nbsp;&nbsp;&nbsp;&nbsp;<span v-show="orders?.status === 3 && house.state < 50">在G端已签约</span>
                    </div>

                    <div>
                        <el-button v-show="orders?.status === 5"
                                   disabled
                        >
                            <span style="color: black">订单是否已退款：<span v-if="orders.statusExtend === 999">是</span>

                                <span v-else>否</span></span>
                        </el-button>
                    </div>

                    <div>
                        <el-button v-show="orders?.status === 3 && (house.state === 50 || house.state === 70)"
                                   class="button"
                                   @click="handleView"
                        >
                            查看合同
                        </el-button>
                    </div>
                </div>
            </template>

            <div class="text item">
                <div class="group">
                    <el-descriptions title="订单信息"
                                     direction="vertical"
                                     :column="7"
                                     border
                    >
                        <el-descriptions-item label="订单编号">
                            {{ orders.orderNumber }}
                        </el-descriptions-item>

                        <el-descriptions-item label="订单类型">
                            {{ ddlxStr }}
                        </el-descriptions-item>

                        <el-descriptions-item label="用户账号">
                            <el-button type="primary"
                                       link
                                       @click="openPeopleDetail"
                            >
                                {{ orders.userAccount }}
                            </el-button>
                        </el-descriptions-item>

                        <el-descriptions-item label="用户姓名">
                            {{ orders.userName }}
                        </el-descriptions-item>

                        <el-descriptions-item label="支付方式">
                            {{ zffsStr }}
                        </el-descriptions-item>

                        <el-descriptions-item v-if="(orders?.status === 1 || orders?.status === 4)"
                                              label="自动关闭订单时间"
                        >
                            {{
                                orders.zdgbsj
                            }}
                        </el-descriptions-item>

                        <el-descriptions-item label="诚意金是否已打给开发商">
                            {{ orders.allowedRefund === '1' ? '是' : '否' }}
                        </el-descriptions-item>
                    </el-descriptions>
                </div>

                <div class="group">
                    <div class="tab-header"
                         style="display: flex;align-items: center;justify-content: space-between;"
                    >
                        <span class="header-title">购房人信息</span>

                        <span class="header-title"><el-button v-if="customLogStateFlag"
                                                              @click="openEditHomebuyer"
                        >查看购房人变更信息</el-button></span>
                    </div>

                    <el-table border
                              :data="houseCustom"
                              :header-cell-style="{ 'text-align': 'left' }"
                              :cell-style="{ 'text-align': 'left' }"
                              style="width: 100%"
                              max-height="250"
                    >
                        <el-table-column prop="gfrxm"
                                         label="姓名"
                        />

                        <el-table-column prop="gfrzjlx"
                                         label="证件类型"
                        >
                            <template #default="scope">
                                <DictTag :options="getDicts.zjlx"
                                         :value="scope.row.gfrzjlx"
                                />
                            </template>
                        </el-table-column>

                        <el-table-column prop="gfrzjhm"
                                         label="证件号码"
                        />

                        <el-table-column prop="lxdh"
                                         label="手机号"
                        />
                    </el-table>
                </div>

                <div v-if="projectBase != null"
                     class="group"
                >
                    <el-descriptions title="房源信息"
                                     direction="vertical"
                                     :column="10"
                                     border
                    >
                        <el-descriptions-item label="合同编号">
                            {{ house.contractId }}
                        </el-descriptions-item>

                        <el-descriptions-item label="企业名称">
                            {{ projectBase.company }}
                        </el-descriptions-item>

                        <el-descriptions-item label="楼盘名称">
                            {{ projectBase.xsmc }}
                        </el-descriptions-item>

                        <el-descriptions-item label="房源地址">
                            {{ orders.fyxx }}
                        </el-descriptions-item>

                        <el-descriptions-item align="right"
                                              label="备案价"
                        >
                            {{ toLocale(orders.pzzj)
                            }}
                        </el-descriptions-item>

                        <el-descriptions-item align="right"
                                              label="销售价"
                        >
                            {{ toLocale(orders.xszj)
                            }}
                        </el-descriptions-item>

                        <el-descriptions-item align="right"
                                              label="诚意金"
                        >
                            {{ toLocale(orders.deposit) }}
                        </el-descriptions-item>
                    </el-descriptions>
                </div>

                <div class="group">
                    <div class="tab-header">
                        <span class="header-title">服务信息</span>
                    </div>

                    <el-table border
                              :data="operateInfo"
                              :header-cell-style="{ 'text-align': 'left' }"
                              :cell-style="{ 'text-align': 'left' }"
                              style="width: 100%"
                              max-height="250"
                    >
                        <el-table-column width="110"
                                         show-overflow-tooltip
                                         prop="czryMc"
                                         label="操作人员"
                        />

                        <el-table-column width="200"
                                         prop="sqsj"
                                         label="操作时间"
                        />

                        <el-table-column width="100"
                                         prop="fwdzt"
                                         label="服务单状态"
                        >
                            <template #default="scope">
                                <template v-if="scope.row.fwdlx === 2 || scope.row.fwdlx === 4">
                                    <template v-if="scope.row.shzt != null && scope.row.eszt == null">
                                        <el-tag type="info">
                                            处理中
                                        </el-tag>
                                    </template>

                                    <DictTag v-else
                                             :options="getDicts.order_fwdzt"
                                             :value="scope.row.fwdzt"
                                    />
                                </template>

                                <DictTag v-else
                                         :options="getDicts.order_fwdzt"
                                         :value="scope.row.fwdzt"
                                />
                            </template>
                        </el-table-column>

                        <el-table-column width="100"
                                         prop="fwdlx"
                                         label="服务单类型"
                        >
                            <template #default="scope">
                                <DictTag :options="getDicts.order_fwdlx"
                                         :value="scope.row.fwdlx"
                                />
                            </template>
                        </el-table-column>

                        <el-table-column prop="shryMc"
                                         label="初审人员"
                                         show-overflow-tooltip
                        />

                        <el-table-column label="初审状态"
                                         align="left"
                                         prop="shzt"
                        >
                            <template #default="scope">
                                <DictTag :options="getDicts.order_shzt"
                                         :value="scope.row.shzt"
                                />
                            </template>
                        </el-table-column>

                        <el-table-column prop="shsj"
                                         width="160"
                                         label="初审时间"
                                         show-overflow-tooltip
                        />

                        <el-table-column prop="bz"
                                         width="160"
                                         label="初审备注"
                                         show-overflow-tooltip
                        />

                        <el-table-column prop="esryMc"
                                         label="复审人员"
                                         show-overflow-tooltip
                        />

                        <el-table-column label="复审状态"
                                         align="left"
                                         prop="eszt"
                        >
                            <template #default="scope">
                                <DictTag :options="getDicts.order_shzt"
                                         :value="scope.row.eszt"
                                />
                            </template>
                        </el-table-column>

                        <el-table-column prop="essj"
                                         width="160"
                                         label="复审时间"
                                         show-overflow-tooltip
                        />

                        <el-table-column prop="esbz"
                                         width="160"
                                         label="复审备注"
                                         show-overflow-tooltip
                        />
                    </el-table>
                </div>
            </div>
        </el-card>
    </div>

    <!-- 用户详情 -->
    <el-dialog v-model="peopleDialogVisible"
               width="50%"
               append-to-body
               destroy-on-close
    >
        <template #header>
            <p class="dialogheader">
                用户详情
            </p>
        </template>

        <peopleDialog :house-custom-id="houseCustomId"
                      :handle-close="peopleDialogHandleClose"
        />
    </el-dialog>
    <!-- 查看 -->
    <el-dialog v-model="dialogVisible"
               fullscreen
    >
        <template #header>
            <p class="dialogheader">
                <!-- 查看合同({{ titleDialog }}) -->
                查看合同
            </p>
        </template>

        <iframe :src="htmlUrl_print"
                width="100%"
                height="800px;"
        />
    </el-dialog>
    <!-- 编辑购房人 -->
    <el-dialog v-model="editVisible"
               width="60%"
               :before-close="editHomebuyerHandleClose"
               append-to-body
               destroy-on-close
    >
        <template #header>
            <p v-if="customLogStateFlag"
               class="dialogheader"
            >
                查看购房人
            </p>

            <p v-else
               class="dialogheader"
            >
                编辑购房人
            </p>
        </template>
        <!-- 编辑购房人 -->
        <editHomebuyer :id="id"
                       :is-disabled="true"
                       :handle-close="editHomebuyerHandleClose"
        />
    </el-dialog>
</template>

<style scoped lang="scss">
:deep(.el-step__icon) {
    width: 50px;
    height: 50px;
}

:deep(.el-step__line) {
    top: 25px !important;
}

:deep(.el-card__header) {
    height: 60px;
    background-color: #e4e4e4 !important;
    display: flex;
    align-items: center;
}

.tab-header {
    margin-bottom: 16px;
}

.header-title {
    color: #303133;
    font-size: 16px;
    font-weight: 700;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.price {
    color: red;
}

.group {
    margin-top: 20px;
}

.app-container {
    padding: 0px;
}
</style>
